<template>
  <view class="index_warp">
    <view class="content">
      <view class="title_name"> 刷题管理 </view>
      <view class="item_warp" @click="clickItem('do_exercise')">
        <view class="set_item">
          <view class="set_name">查看历史</view>
          <view class="iconfont icon-angle-right" />
        </view>
      </view>
    </view>

    <view class="content">
      <view class="title_name"> 账号与安全 </view>
      <view class="item_warp">
        <view class="set_item" @click="clickItem('login')">
          <view class="set_name">更改绑定手机</view>
          <view class="right_warp">
            <view class="right_info"> {{ user.phoneNumber || "" }} </view>
            <view class="iconfont icon-angle-right" />
          </view>
        </view>
        <view class="set_item" @click="clickItem('choose_address')">
          <view class="set_name">我的地址</view>
          <view class="iconfont icon-angle-right" />
        </view>
      </view>
    </view>

    <view class="content">
      <view class="title_name"> 关于众智 </view>
      <view class="item_warp">
        <view class="set_item">
          <view class="set_name">用户协议</view>
          <view class="iconfont icon-angle-right" />
        </view>
        <view class="set_item">
          <view class="set_name">版本号</view>
          <view class="right_warp">
            <view class="right_info"> V.0.1.01 </view>
            <view class="iconfont icon-angle-right" />
          </view>
        </view>
      </view>
    </view>

    <view class="laout_warp">
      <view class="btn flex_c" @click="logout">退出登陆</view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("user", ["user"]),
  },
  onLoad() {
    if (!this.user.id) {
      this.$ShowModal({
        content: "当前未登陆,是否登陆?",
      }).then((res) => {
        if (res) {
          this.$u.route("/pages/login/login");
        } else {
          this.$u.route({
            type: "type",
          });
        }
      });
    }
  },
  methods: {
    logout() {
      this.$ShowModal({
        content: "确定退出当前账号?",
      }).then((res) => {
        if (!res) return;
        this.$store.dispatch("user/logout");
        this.$u.route({
          type: "switchTab",
          url: "/pages/tabbar/tab_index/tab_index",
        });
      });
    },
    clickItem(type) {
      if (type == "click") {
        try {
          // uni.clearStorageSync();
          // this.$ShowToast({
          //   title: "清除成功",
          // });
        } catch (e) {
          Toast({
            title: "清除失败，请重试",
          });
        }
      } else {
        let url = `/pages/${type}/${type}`;
        this.$u.route(url, {
          smsType: 2,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.index_warp {
  background: #f5f7fa;
  .content {
    .title_name {
      height: 44upx;
      font-size: 32upx;
      font-weight: 800;
      line-height: 44upx;
      padding: 0 30upx;
      margin: 20upx 0;
    }
    .item_warp {
      padding: 0 30upx;
      background: #ffffff;
      width: 750upx;

      .set_item {
        width: 100%;
        height: 120upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &:nth-child(2) {
          border-top: 1upx solid #eee;
        }
        .set_name {
          height: 42upx;
          font-size: 30upx;
          font-weight: bold;
          line-height: 42upx;
        }
        .iconfont {
          font-size: 20upx;
        }
        .right_warp {
          display: flex;
          align-items: center;
          .right_info {
          }
          .iconfont {
            font-size: 20upx;
            margin-left: 12upx;
          }
        }
      }
    }
  }

  .laout_warp {
    margin-top: 30upx;
    padding: 0 30upx;
    .btn {
      width: 100%;
      height: 80upx;
      background: #ccc;
      font-size: 36upx;
      font-weight: 600;
      border-radius: 30upx;
    }
  }
}
</style>
